<template>
  <div class="container">
    <div v-if="false" class="filter-bar">
      <el-form ref="queryFormRef" :inline="true" :model="queryForm">
        <!-- <el-form-item prop="keyword">
          <el-input size="small" v-model="queryForm.keyword" clearable class="filter-item" placeholder="名称/条码/自编码" />
        </el-form-item>  -->
      </el-form>
    </div>
    <el-table :data="tableData" :height="contentHeight - 80" stripe style="width: 100%;">
      <el-table-column align="center" fixed label="序号" type="index"/>
      <el-table-column align="center" label="活动名称" prop="actName" show-overflow-tooltip/>
      <el-table-column align="center" label="油站名称" prop="stationName" show-overflow-tooltip/>
      <el-table-column align="center" label="开始时间" prop="startDate" show-overflow-tooltip/>
      <el-table-column align="center" label="结束时间" prop="endDate" show-overflow-tooltip/>
      <el-table-column align="center" label="市场价格" prop="marketPrice"/>
      <el-table-column align="center" label="销售价格" prop="salePrice"/>
      <el-table-column align="center" label="商品详情" prop="actCommodityDesc" show-overflow-tooltip/>
      <el-table-column align="center" label="活动状态" prop="actStatusName" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.actStatus === 1" effect="dark" type="success">{{ scope.row.actStatusName }}</el-tag>
          <el-tag v-else effect="dark" type="info">{{ scope.row.actStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" label="活动描述" prop="actDesc"/>
    </el-table>
    <div class="pager">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :total="dataListAfterFilter.length"
                     layout="total, prev, pager, next" @prev-click="handlePrevClick" @next-click="handleNextClick"
                     @current-change="handleCurrentChange"></el-pagination>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import {getPromotionList} from '@/api/store'

export default {
  name: 'PromotionList',
  data () {
    return {
      currentPage: 1,
      queryForm: {
        keyword: ''
      },
      checkCategoryList: []
    }
  },
  computed: {
    tableData () {
      if (this.currentPage * this.pageSize > this.dataListAfterFilter.length) {
        return this.dataListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.dataListAfterFilter.length)
      } else {
        return this.dataListAfterFilter.slice(this.pageSize * (this.currentPage - 1), this.pageSize * this.currentPage)
      }
    },
    ...mapGetters(['stockList', 'contentHeight', 'stationId', 'pageSize']),
    dataListAfterFilter () {
      if (this.checkCategoryList.length > 0) {
        return this.keywordFilter(this.stockList.filter(item => this.checkCategoryList.indexOf(item.category) > -1))
      } else {
        return this.keywordFilter(this.stockList)
      }
    }
  },
  mounted () {
    // 手动获取一次库存列表
    getPromotionList(this.stationId).then(res => {
      console.log(res)
      this.$store.dispatch('setStockList', res.data)
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    showIndex (index) {
      return this.pageSize * (this.currentPage - 1) + index + 1
    },
    handleCheckboxChange (value) {
      console.log('handleCheckboxChange')
      console.log(value)
      this.currentPage = 1
    },
    keywordFilter (dataList) {
      if (this.queryForm.keyword) {
        return dataList.filter(item => item.commodityName.indexOf(this.queryForm.keyword) > -1 || item.barcode.indexOf(this.queryForm.keyword) > -1 || item.customCode.indexOf(this.queryForm.keyword) > -1)
      } else {
        return dataList
      }
    },
    handlePrevClick (page) {
      this.currentPage = page
    },
    handleNextClick (page) {
      this.currentPage = page
    },
    handleCurrentChange (page) {
      this.currentPage = page
    }
  }
}
</script>

<style scoped>
.container {

}

.pager {
  width: 100%;
  text-align: center;
  /* padding: 5px; */
  background: white;
}

.filter-bar {
  width: 100%;
  min-height: 60px;
}
</style>